import React from 'react'
import { cn } from '../../utils/cn'

interface StatsCardProps {
  title: string
  value: string | number
  icon: React.ReactNode
  trend?: string
  color?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
  className?: string
}

const colorClasses = {
  blue: 'bg-blue-50 border-blue-200 text-blue-600',
  green: 'bg-green-50 border-green-200 text-green-600',
  purple: 'bg-purple-50 border-purple-200 text-purple-600',
  orange: 'bg-orange-50 border-orange-200 text-orange-600',
  red: 'bg-red-50 border-red-200 text-red-600'
}

export function StatsCard({ 
  title, 
  value, 
  icon, 
  trend, 
  color = 'blue', 
  className 
}: StatsCardProps) {
  return (
    <div className={cn(
      "bg-white rounded-lg border border-gray-200 p-6",
      className
    )}>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-600 mb-1">{title}</p>
          <p className="text-2xl font-bold text-gray-900">{value}</p>
          {trend && (
            <p className="text-xs text-gray-500 mt-1">{trend}</p>
          )}
        </div>
        <div className={cn(
          "p-3 rounded-lg border",
          colorClasses[color]
        )}>
          {icon}
        </div>
      </div>
    </div>
  )
}